<template>
	<!-- 质保金退还 -->
	<nt-container>
		<view class="warranty">
			<view class="warranty-container">
				<view class="title">
					距离您暂别南天快修已有
				</view>
				<view class="days">
					<text class="day">180</text>天
				</view>
				<view class="tips">
					-您已于2023年01月27日解约-
				</view>
				<view class="wellcom">
					我们随时欢迎您的归来!
				</view>
			</view>
			<view class="warranty-detail" @tap="nav('/subpackage/member/pages/warranty/detail')">
				<view class="warranty-detail-left">
					您有待退还的质保金
				</view>
				<view class="warranty-detail-right">
					<text>详情</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="showPayform">
				<u-button class="button" color="#ff7a00" type="primary" text="退出登录" shape="circle"
					@click="userLogout"></u-button>
			</view>
		</view>
	</nt-container>
</template>

<script>
	export default {
		methods: {
			async userLogout() {
				await this.$store.dispatch("user/logout")
				this.$store.dispatch('user/clearLocation')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.warranty {
		padding: 30rpx 40rpx;
		font-family: Alibaba PuHuiTi 2.0;

		&-container {
			background: #FFFFFF;
			border-radius: 10rpx;
			font-weight: normal;
			text-align: center;
			overflow: hidden;
			padding: 45rpx 40rpx;

			.title {
				font-size: 33rpx;
				color: #333333;
			}

			.days {
				font-size: 33rpx;
				color: #333333;
				margin-bottom: 20rpx;

				.day {
					font-size: 100rpx;
					color: #FF7A00;

				}
			}

			.tips {
				margin-bottom: 40rpx;
				font-size: 29rpx;
				color: #AAAAAA;
			}

			.wellcom {
				background: #FFF9F4;
				border-radius: 10rpx;
				font-size: 33rpx;
				color: #FF7A00;
				line-height: 78rpx;
			}
		}

		&-detail {
			margin-top: 30rpx;
			display: flex;
			line-height: 100rpx;
			border-radius: 50rpx;
			justify-content: space-between;
			align-items: center;
			background: #FFFFFF;
			padding: 0 50rpx;

			&-left {
				font-size: 33rpx;
				color: #333333;
			}

			&-right {
				font-size: 29rpx;
				color: #AAAAAA;
				display: flex;
				align-items: center;
			}
		}
	}

	.showPayform {
		margin-top: 90rpx
	}
</style>